@vx/group

What is @vx/group?

@vx/group is a part of the vx (now known as visx) collection of low-level visualization components for React. It provides a way to group multiple SVG elements together, making it easier to manage and transform them as a single unit. This is particularly useful in creating complex visualizations where you need to apply transformations or styles to a collection of elements.

What are @vx/group's main functionalities?

Grouping SVG Elements

This feature allows you to group multiple SVG elements together and apply transformations such as translation. In this example, a circle and a rectangle are grouped together and translated 100 units down and 50 units to the right.

const Group = require('@vx/group').Group;

<Group top={100} left={50}>
  <circle cx={0} cy={0} r={20} fill="blue" />
  <rect x={-10} y={-10} width={20} height={20} fill="red" />
</Group>

Applying Transformations

This feature allows you to apply transformations like rotation to a group of SVG elements. In this example, a circle and a rectangle are grouped together and rotated by 45 degrees.

const Group = require('@vx/group').Group;

<Group transform="rotate(45)">
  <circle cx={50} cy={50} r={20} fill="green" />
  <rect x={40} y={40} width={20} height={20} fill="yellow" />
</Group>

Other packages similar to @vx/group

d3-selection

d3-selection is a part of the D3.js library that allows you to select and manipulate DOM elements. It provides similar functionality to @vx/group in terms of grouping and transforming elements, but it is more general-purpose and not specifically designed for React.

react-konva

react-konva is a React wrapper for the Konva.js library, which is used for creating 2D canvas graphics. It provides similar grouping and transformation functionalities but is designed for canvas elements rather than SVG.

react-spring

react-spring is a spring-physics-based animation library for React. While it is primarily used for animations, it also provides functionalities for grouping and transforming elements, making it a versatile alternative to @vx/group.

README

@vx/group

npm install --save @vx/group

A Group is a container for other objects. It lets you pass in a top and left margin and a classname.

Example usage:

import { Group } from '@vx/group';
const myGroup = (
  <Group top={50} left={20}>
    /* Children here */
  </Group>
)

Properties

Name	Default	Type	Description
top	0	number	Margin on top
left	0	number	Margin on left
className		string	The class name associated with the svg g element.

Source For Components

• <Group />

Changelog

v0.0.165

:rocket: Enhancements

• [text] export getStringWidth() util. #301

:house: Internal

• [build] use rollup for build #298
  • adds dist/vx-{name}.{umd,es}.js files
  • adds module field to package.json that points to dist/vx-{name}.es.js for bundlers that support it (webpack, rollup, etc)
  • main field points to dist/vx-{name}.umd.js
  • removes react-fatigue-dev + Makefile build (means you can build on windows now)
  • build targets "android": 30, "chrome": 35, "edge": 14, "explorer": 9, "firefox": 52, "safari": 8, "ucandroid": 1 (matching airbnb-babel-preset)
  • keeps build/ with cjs babel build files for deep paths (no breaking changes 🤞)

:trophy: Contributors

• hshoff

Changes:
 - @vx/annotation: 0.0.165-beta.1 => 0.0.165
 - @vx/axis: 0.0.165-beta.1 => 0.0.165
 - @vx/bounds: 0.0.165-beta.1 => 0.0.165
 - @vx/boxplot: 0.0.165-beta.1 => 0.0.165
 - @vx/brush: 0.0.165-beta.1 => 0.0.165
 - @vx/clip-path: 0.0.165-beta.1 => 0.0.165
 - @vx/curve: 0.0.165-beta.1 => 0.0.165
 - @vx/demo: 0.0.165-beta.1 => 0.0.165
 - @vx/drag: 0.0.165-beta.1 => 0.0.165
 - @vx/event: 0.0.165-beta.1 => 0.0.165
 - @vx/geo: 0.0.165-beta.1 => 0.0.165
 - @vx/glyph: 0.0.165-beta.1 => 0.0.165
 - @vx/gradient: 0.0.165-beta.1 => 0.0.165
 - @vx/grid: 0.0.165-beta.1 => 0.0.165
 - @vx/group: 0.0.165-beta.1 => 0.0.165
 - @vx/heatmap: 0.0.165-beta.1 => 0.0.165
 - @vx/hierarchy: 0.0.165-beta.1 => 0.0.165
 - @vx/legend: 0.0.165-beta.1 => 0.0.165
 - @vx/marker: 0.0.165-beta.1 => 0.0.165
 - @vx/mock-data: 0.0.165-beta.1 => 0.0.165
 - @vx/network: 0.0.165-beta.1 => 0.0.165
 - @vx/pattern: 0.0.165-beta.1 => 0.0.165
 - @vx/point: 0.0.165-beta.1 => 0.0.165
 - @vx/responsive: 0.0.165-beta.1 => 0.0.165
 - @vx/scale: 0.0.165-beta.1 => 0.0.165
 - @vx/shape: 0.0.165-beta.1 => 0.0.165
 - @vx/stats: 0.0.165-beta.1 => 0.0.165
 - @vx/text: 0.0.165-beta.1 => 0.0.165
 - @vx/threshold: 0.0.165-beta.1 => 0.0.165
 - @vx/tooltip: 0.0.165-beta.1 => 0.0.165
 - @vx/voronoi: 0.0.165-beta.1 => 0.0.165
 - @vx/vx: 0.0.165-beta.1 => 0.0.165
 - @vx/zoom: 0.0.165-beta.1 => 0.0.165